<template>
  <div class="status-monitor-page">
    <!--    <global-navbar :breadcrumbs="breadcrumbs" active-item="status-monitor" />-->
    <el-row class="monitor-navbar" type="flex" justify="space-between" align="middle">
      <el-col :span="20">
        <el-menu background-color="#000C34" text-color="#4bc3ec"  :default-active="selectedTab" mode="horizontal" @select="handleSelect">
          <el-menu-item index="pressure-monitor">设备信息管理</el-menu-item>
          <el-menu-item index="bucket-monitor">传感器管理</el-menu-item>
          <el-menu-item index="center-punch-monitor">测点管理</el-menu-item>
          <el-menu-item index="small-car-monitor">用户管理</el-menu-item>
          <el-menu-item index="journal-monitor">日志</el-menu-item>
          <!--          <el-menu-item index="toggle" @click.stop="handleToggleClick">监测开关-->
          <!--          <el-menu-item index="toggle">监测开关-->
          <!--            <el-switch v-model="monitoringEnabled" :disabled="true" active-color="#13ce66" inactive-color="#ff4949"></el-switch>-->
          <!--          </el-menu-item>-->
          <!--          <el-menu-item class="disabled-menu-item" :index="null" :disabled="true" >-->
          <!--            <span class="switch-label">机前辊道</span>-->
          <!--            <el-switch v-model="monitoringEnabled" disabled ></el-switch>-->
          <!--          </el-menu-item>-->
          <!-- <el-menu-item
              :index="null"
              :disabled="false"
              :style="{ cursor: 'default' }"
              class="disabled-menu-item">
            <span >机前辊道</span>
            <el-switch v-model="monitoringEnabled" disabled></el-switch>
          </el-menu-item> -->

        </el-menu>
      </el-col>
      <!--      <el-col :span="4" class="switch-column">-->
      <!--        <span>监测开关</span>-->
      <!--        <el-switch v-model="monitoringEnabled" :disabled="true" active-color="#13ce66" inactive-color="#ff4949"></el-switch>-->
      <!--      </el-col>-->
    </el-row>
    <div class="content-wrapper">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="24">
          <div v-if="selectedTab === 'pressure-monitor'">
            <!-- 压头监测的内容 -->
            <pressure-monitor />
          </div>
          <div v-else-if="selectedTab === 'bucket-monitor'">
            <!-- 桶罩监测的内容 -->
            <bucket-monitor />
          </div>
          <div v-else-if="selectedTab === 'center-punch-monitor'">
            <!-- 对中穿孔装置监测的内容 -->
            <center-punch-monitor />
          </div>
          <div v-else-if="selectedTab === 'small-car-monitor'">
            <!-- 小车监测的内容 -->
            <small-car-monitor />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PressureMonitor from '@/views/Dashboard.vue';
import BucketMonitor from '@/views/BucketMonitor.vue';
import CenterPunchMonitor from '@/views/systemAdministration/MeasurementPointManagement.vue';// 换成要求的格式 地址：src\views\FaultDiagnosis.vue
import SmallCarMonitor from '@/views/SmallCarMonitor.vue';
import { getLatestStatus } from '@/api/dataService';

export default {
  name: 'StatusMonitorPage',
  components: {
    PressureMonitor,
    BucketMonitor,
    CenterPunchMonitor,
    SmallCarMonitor,
  },
  data() {
    return {
      breadcrumbs: ['状态监测', '压头监测'],
      selectedTab: 'pressure-monitor',
      monitoringEnabled: false,
    };
  },
  methods: {
    handleSelect(key) {
      if (key !== null) {  // 监测开关禁用时不会触发导航行为
        this.selectedTab = key;
        this.updateBreadcrumbs();
      }
    },

    updateBreadcrumbs() {
      if (this.selectedTab === 'pressure-monitor') {
        this.breadcrumbs = ['状态监测', '压头监测'];
      } else if (this.selectedTab === 'bucket-monitor') {
        this.breadcrumbs = ['状态监测', '桶罩及桶罩驱动加工监测'];
      } else if (this.selectedTab === 'center-punch-monitor') {
        this.breadcrumbs = ['状态监测', '对中穿孔装置监测'];
      } else if (this.selectedTab === 'small-car-monitor') {
        this.breadcrumbs = ['状态监测', '装卸载小车监测'];
      }
    },
    async fetchMonitoringStatus() {
      try {
        const response = await getLatestStatus(); // 调用API获取状态
        const status = response.data;

        // 根据返回值设置开关状态
        if (status === 1 || status === 2 || status === 2048) {
          this.monitoringEnabled = true;
        } else {
          this.monitoringEnabled = false;
        }
      } catch (error) {
        console.error('获取监测状态失败:', error);
      }
    },
    // handleToggleClick() {
    //   // event.preventDefault();  // 阻止默认事件
    //   // event.stopPropagation(); // 阻止事件冒泡
    // },



  },


  mounted() {
    this.fetchMonitoringStatus(); // 页面加载时获取开关状态
    this.interval = setInterval(this.fetchMonitoringStatus, 5000);
    // // 强制设置颜色样式
    // this.$nextTick(() => {
    //   const disabledItem = this.$el.querySelector('.disabled-menu-item .switch-label');
    //   if (disabledItem) {
    //     disabledItem.style.color = '#000000';
    //   }
    // });
  },
  beforeUnmount() {
    clearInterval(this.interval); // 组件销毁时清除定时器
  },

};
</script>

<style scoped>
/* 整体页面背景颜色 */
.status-monitor-page {
  background-color: #000C34;
  min-height: 100vh;
  padding: 20px;
  color: #C0C4CC; /* 设置整体文字颜色 */
}

/* 导航栏样式 */
.monitor-navbar {
  background-color: #000C34 !important; /* 设置导航栏背景色 */
  padding: 10px;
  margin-bottom: 20px;
}

/* 未选中菜单项样式 */
.el-menu-item {
  color: #C0C4CC; /* 未选中时的文字颜色 */
}

/* 选中菜单项样式 */
.el-menu-item.is-active {
  color: #3A7FF0 !important; /* 选中时的文字颜色 */
  border-bottom: 2px solid #3A7FF0; /* 选中时的下划线 */
}

/* 禁用菜单项样式 */
.disabled-menu-item {
  pointer-events: none; /* 禁止点击事件 */
  cursor: default; /* 确保光标为默认样式 */
  color: #C0C4CC; /* 禁用菜单项的颜色 */
}

/* 内容区域样式 */
.content-wrapper {
  margin-top: 20px;
}
/* 移除默认选中框的背景色 */
.el-menu-item.is-active {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* 鼠标悬停时字体颜色变化 */
.el-menu-item:hover {
  color: #3A7FF0 !important;  /* 悬停时的字体颜色 */
  background-color: transparent !important; /* 保持背景透明 */
}

/* 取消点击后的框显示 */
.el-menu-item:focus {
  outline: none;
}

</style>
